<template>
  <el-scrollbar class="menu-scrollbar">
    <el-menu :default-active="activeMenu" :unique-opened="true" @select="handleSelect" class="custom-menu"
      background-color="transparent">
      <template v-for="item in menuList">
        <el-submenu v-if="item.children" :index="item.index" :key="item.path"
          :class="{ activeParentMenu: isParentActive && item.index === activeParentMenu }">
          <template slot="title">
            <span @click="navigateSubmenu(item)">{{ item.menuName }}</span>
          </template>
          <el-menu-item v-for="subItem in item.children" :index="subItem.index" :key="subItem.index"
            @click="navigateToRoute(subItem)">
            <!-- <el-row :gutter="5" type="flex"  justify="space-between" class="grid-item"> -->
              <el-row :gutter="5" type="flex"  justify="center" class="grid-item">
              <!-- <el-col :span="8">
                <div class="grid-content"><i class="el-icon-folder"></i></div>
              </el-col> -->
              <el-col :span="22">
                <div class="grid-content selected">{{ subItem.menuName }}</div>
              </el-col>
            </el-row>
          </el-menu-item>
        </el-submenu>
        <!-- <el-menu-item v-else :index="item.index" :key="item.path" @click="navigateToRoute(item)"> -->
        <el-menu-item v-else :index="item.index" :key="item.index" @click="navigateToRoute(item)">
          <span>{{ item.menuName }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </el-scrollbar>
</template>

<script>
export default {
  name: "MenuList",
  data() {
    return {
      activeMenu: '1',
      activeParentMenu: '1',
      isParentActive: false,
      menuList: [
        // { index: '1', menuName: "首页", path: "/homePage" },
        {
          index: '2',
          menuName: '空域规划准备',
          children: [
            { index: '2-1', menuName: '空域使用需求管理', path: '/airspace-need' },
            { index: '2-2', menuName: '空域使用规范管理', path: '/airspace-restriction' },
          ]
        },
        {
          index: '3',
          menuName: '空域规划',
          children: [
            { index: '3-2', menuName: '空域规划方案生成', path: "/planning-scheme" },
            { index: '3-1', menuName: '空域使用批复处理', path: "/usage-conditions" },
            { index: '3-3', menuName: '空域使用说明发布', path: "/planning-release" }
          ]
        },
        {
          index: '4',
          menuName: '空域运行评估',
          children: [
            { index: '4-1', menuName: '空域运行间隔评估', path: '/safety-interval' },
            { index: '4-2', menuName: '空域对象容量评估', path: '/capacity-assessment' },
            // { index: '4-3', menuName: '空域态势容流评估', path: '/flow-assessment' },
            { index: '4-4', menuName: '空域态势容流告警', path: '/alert-results' },
          ]
        },
        // {
        //   index: '5',
        //   menuName: '空域运行管理',
        //   children: [
        //     { index: '5-1', menuName: '空域运行管理', path: '/airspace-manage' },
        //   ]
        // },
      ]
    };
  },
  mounted() {
    // 检查路由，更新activeMenu和activeParentMenu
    this.updateMenuByRoute(this.$route.path);

    // 检查是否为根路径，如果是则默认选中 '/airspace-need'
    if (this.$route.path === '/') {
      // this.activeMenu = '2-1';
      // this.activeParentMenu = '2';
      this.activeMenu = '5-1';
      this.activeParentMenu = '5';
      this.isParentActive = true;
      // this.$router.push('/airspace-need'); 
      this.$router.push('/combined'); 
      
      // 检查路由，更新activeMenu和activeParentMenu
      this.updateMenuByRoute(this.$route.path);
    }


    const activeMenu = localStorage.getItem('basicActiveMenu');
    const activeParentMenu = localStorage.getItem('basicActiveParentMenu');
    const isParentActive = localStorage.getItem('basicIsParentActive');
    if (activeMenu) {
      this.activeMenu = activeMenu;
    }
    if (activeParentMenu) {
      this.activeParentMenu = activeParentMenu;
    }
    if (isParentActive) {
      this.isParentActive = isParentActive;
    }
  },
  beforeDestroy() {
    if (localStorage.getItem('basicActiveMenu')) {
      localStorage.removeItem("basicActiveMenu");
    }
    if (localStorage.getItem('basicActiveParentMenu')) {
      localStorage.removeItem("basicActiveParentMenu");
    }
    if (localStorage.getItem('basicIsParentActive')) {
      localStorage.removeItem("basicIsParentActive");
    }
  },
  methods: {
    navigateSubmenu(item) {
      console.log('navigateSubmenu', item)
      this.$router.push(item.path);
    },
    navigateToRoute(item) {
      console.log('navigateToRoute', item)
      this.$router.push(item.path);
    },
    handleSelect(index, path) {
      this.activeMenu = index;
      this.activeParentMenu = path[0];
      if (path.length > 1) {
        this.isParentActive = this.activeMenu.startsWith(index);
      }
      localStorage.setItem('basicActiveMenu', this.activeMenu);
      localStorage.setItem('basicActiveParentMenu', this.activeParentMenu);
      localStorage.setItem('basicIsParentActive', this.isParentActive);
    },
    updateMenuByRoute(path) {
      // 根据路由找到对应的菜单项
      this.menuList.forEach(menu => {
        if (menu.children) {
          menu.children.forEach(subMenu => {
            if (subMenu.path === path) {
              this.activeMenu = subMenu.index;
              this.activeParentMenu = menu.index;
              this.isParentActive = true;
            }
          });
        } else if (menu.path === path) {
          this.activeMenu = menu.index;
          this.activeParentMenu = null;
          this.isParentActive = false;
        }
      });

      // 更新到localStorage
      localStorage.setItem('basicActiveMenu', this.activeMenu);
      localStorage.setItem('basicActiveParentMenu', this.activeParentMenu);
      localStorage.setItem('basicIsParentActive', this.isParentActive);
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../scss/index";
</style>
